<template>
  <div :class="['grimm-badge', {'grimm-badge-dot': isDot}]">
    <span class="grimm-badge-val" v-if="!isDot">{{getBadgeVal}}</span>
  </div>
</template>

<script>
const COMPONENT_NAME = 'grimm-badge'

export default {
  name: COMPONENT_NAME,
  props: {
    isDot: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number],
      default: ''
    },

    // Show 'maxNumber+' instead when the type of value is number and it is more than maxNumber.
    maxNumber: {
      type: Number,
      default: 99
    },
  },
  computed: {
    isShowExtra() {
      return !this.isDot && typeof this.value === 'number' && this.value > this.maxNumber
    },
    getBadgeVal() {
      return this.isShowExtra ? `${this.maxNumber}+` : this.value
    }
  }
}
</script>
<style lang="stylus"  scoped>
@import '../../common/stylus/variable.styl';

.grimm-badge {
  box-sizing border-box
  padding 0 4px
  min-width 16px
  width fit-content
  line-height 16px
  border-radius 8px
  font-size 10px
  text-align center
  color #fff
  background $color-red
}
.grimm-badge-dot {
  padding 0
  min-width 8px
  width 8px
  height 8px
  border-radius 50%
}
</style>